<html>
  <head>
    <title>类式组件</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="../../js/react.development.js"></script>
    <script type="text/javascript" src="../../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    <script type="text/babel">
      class Helloworld extends React.Component {
        render() {
          return <h2>类式组件</h2>;
        }
      }
      class Name extends React.Component {
        render() {
          const { name } = this.props;
          return <span>姓名: {name}</span>;
        }
      }

      class Main extends React.Component {
        render() {
          console.log('render中的this', this);

          return (
            <>
              <Helloworld />
              <Name name="JudithHuang" />
            </>
          );
        }
      }
      ReactDOM.render(<Main />, document.getElementById('root'));
    </script>
  </body>
</html>
